<!-- 批量签章管理 -->
<template>
  <el-container class="electronicSignature">

    <el-main class="mainDetails">
      <div>
        <SearchPanel title="查询条件">
          <div ref="queryFormBox" class="search-flex-box">
            <MyForm
              ref="formRef"
              v-model="queryParams"
              :form-option="formOption"
              :select-list="dicLists"
              @handleEvent="changeSelect"
            />
            <div class="searchBtn">
              <el-button
                type="primary"
                class="pms-button-primary"
                style="margin-top: 4px;"
                @click="doSearch"
              >查询</el-button>
            </div>
          </div>
        </SearchPanel>
        <SearchList title="查询结果" style="margin-top: 16px">
          <template #header-btn>
            <BtnConfig v-if="isShowBtn" ref="btnConfigRef" :btn-configs="btnOption" @propClick="btnClick" />
          </template>
          <template #body>
            <MyTable
              id="id"
              ref="myTableRef"
              :table-data="tableData"
              :columns="colOption"
              :col-option-enum="dicLists"
              :is-selection="false"
            >
              <template #taskName="{ scope }">
                <el-button type="text" @click="goPage(scope)">{{ scope.taskName }}</el-button>
              </template>
            </MyTable>
            <pagination
              v-if="pageParam.total > 10"
              :total="pageParam.total"
              :page.sync="pageParam.pageNum"
              :limit.sync="pageParam.pageSize"
              @pagination="doSearch"
            />
          </template>
        </SearchList>
        <ProcessDialog ref="insertProcessRef" @close="dialogClosed" @refreshTable="doSearch" />
      </div>
    </el-main>
  </el-container>
</template>

<script>
const ENUM_STATS = 'SC_ALL_WD_001'
import SearchPanel from '@/components/basic/SearchPanel'
import MyForm from '@/components/basic/myForm'
import SearchList from '@/components/basic/SearchList'
import MyTable from '@/components/basic/myTable'
import SysConst from '@/common/const'
import BtnConfig from '@/components/basic/btnConfig.vue'
import ProcessDialog from './insertProcess.vue'
import { getDropdownData } from '@/api/common' // 字典接口
import { formOptionQuarter, formOptionMonth, colOption, btnOption, tableOptionQuarter, tableOptionMonth } from '.'
import {
  queryBasicTask,
  permissionBtnShow
} from '@/api/attachManagement/electronicSign/electronicSignature'

export default {
  name: 'ElectronicSignature',
  components: {
    SearchPanel,
    SearchList,
    MyTable,
    MyForm,
    ProcessDialog,
    BtnConfig
  },
  data() {
    return {
      queryParams: {
        taskYear: new Date().getFullYear().toString(), // 当前年份
        processType: 'SC_ALL_WD_001'// 流程类型
      }, // 查询数据
      formOption: {}, // 查询条件配置项
      customCheck: '', // 查询条件建设单位选择后显示
      dialogUnit: false, // 建设单位弹框
      tableData: [], // 列表数据
      colOption, // 列表表头
      btnOption, // 列表按钮
      dicLists: {
        SIG_NODE: [
          {
            dictId: '', dictName: '全部'
          },
          {
            dictName: '采购经理发起签章流程',
            dictId: '采购经理发起签章流程'
          }, {
            dictName: '供应商确认签章',
            dictId: '供应商确认签章'
          }, {
            dictName: '采购经理补充签字',
            dictId: '采购经理补充签字'
          }, {
            dictName: '组经理审批',
            dictId: '组经理审批'
          }, {
            dictName: '总监审批',
            dictId: '总监审批'
          }, {
            dictName: '总经理审批',
            dictId: '总经理审批'
          }, {
            dictName: '采购经理盖章',
            dictId: '采购经理盖章'
          }, {
            dictName: '已关闭',
            dictId: '已关闭'
          }
        ]
      }, // 下拉框字典选项集合
      // 分页信息
      pageParam: {
        pageSize: SysConst.PAGESIZE, // 每页显示val条
        pageNum: SysConst.CURRENT_PAGE, // 当前页
        total: SysConst.TOTAL // 总数
      },
      // 表格配置
      tableOptionQuarter,
      tableOptionMonth,
      formOptionQuarter,
      formOptionMonth,
      isShowBtn: false
    }
  },
  created() {
    // this.$nextTick(() => {
    //   this.setHeight(false)
    // })
    // 初始化下拉框配置
    this.formOption = this.formOptionQuarter
    this.getDictData() // 获取字典数据
    this.doSearch() // 使用默认查询参数执行查询
    this.permissionOperation()
  },
  methods: {
    async permissionOperation() {
      const { code } = await permissionBtnShow()
      if (+code === 200) {
        this.isShowBtn = true
      }
    },
    // 跳转代办详情页面
    goPage(row) {
      window.open(row.agentConnection)
    },
    // 查看数据
    doSearch(item) {
      const params = {
        pageNum: item?.page || SysConst.CURRENT_PAGE,
        pageSize: item?.limit || SysConst.PAGESIZE,
        ...this.queryParams
      }
      // 显示季度 显示月份
      this.colOption = params.processType === 'SC_ALL_WD_001' ? this.tableOptionQuarter : this.tableOptionMonth
      queryBasicTask(params).then(res => {
        if (+res.code !== 200) {
                  return Promise.reject(res)
        }
        this.tableData = res.data?.records
        this.pageParam.total = res.data?.total || 0
        this.pageParam.pageSize = item?.limit || SysConst.PAGESIZE
        this.pageParam.pageNum = item?.page || SysConst.CURRENT_PAGE
      })
    },

    // 列表按钮点击事件
    btnClick() {
      this.$refs.insertProcessRef.show()
    },
    dialogClosed() {
      // 可以在这里添加对话框关闭后的逻辑
    },
    // 选择下拉框联动
    changeSelect(prop, row) {
      if (prop === 'processType') {
        this.formOption = row === ENUM_STATS ? this.formOptionQuarter : this.formOptionMonth
        this.getDictData(row)
      }
    },
    // 获取下拉框数据
    async getDictData(type = ENUM_STATS) {
      const arr = ['SIG_TASK_QUARTER', 'SIG_PROCESS_TYPE', 'month'].filter(item => type === ENUM_STATS ? !(['month'].includes(item)) : true)
      const promises = arr.map(item => getDropdownData(item))
      const results = await Promise.all(promises)
      const defaultOption = { dictId: '', dictName: '全部' }
      arr.forEach((item, i) => {
        const data = results[i].data ?? []
        if (item === 'SIG_PROCESS_TYPE') {
          this.queryParams.processType = type === ENUM_STATS ? data[0].dictId : data[1].dictId
          this.$set(this.dicLists, item, data)
        } else {
          this.$set(this.queryParams, 'taskMonth', defaultOption.dictId)
          const newData = [defaultOption, ...data]
          this.$set(this.dicLists, item, newData)
        }
      })
      this.$forceUpdate()
    },
    // 设置高度
    setHeight(isFold) {
      const child = this.$refs.formRef.$refs
      const height = (formOption.itemData.length / 3).toFixed() - 0
      this.$refs.queryFormBox.style.height = isFold ? `${height * 24}px` : '54px'
      child.myFormRef.style.height = isFold ? `${height * 24}px` : '54px'
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .myTable .el-table__row td:nth-child(4) span {
  color: rgb(2, 167, 240);
}

.electronicSignature {
  padding: 0 25px;
}
</style>
